
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.calendar{width:32%;font-size:100%;margin:50px auto 0;-webkit-perspective:1000px;perspective:1000px;cursor:default;position:relative}
.calendar .headercalendar{height:60px;position:relative;color:#fff}
.calendar .headercalendar .textcalendar{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#308ff0;padding:5px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:.4s ease-in-out 0s;box-shadow:0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.2);opacity:0}
.calendar .headercalendar .textcalendar>span{text-align:center;padding:15px;display:block}
.calendar .headercalendar.active .textcalendar{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}
.months{width:100%;height:280px;position:relative}
.months .hr{height:1px;margin:15px 0;background:#ccc}
.month{padding:15px;width:inherit;height:inherit;background:#fff;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:all .4s ease-in-out 0s;box-shadow:0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2)}
.months[data-flow="left"] .month{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.months[data-flow="right"] .month{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.table{width:100%;font-size:10px;font-weight:400;display:table}
.table .row{display:table-row}
.table .row.head{color:#308ff0;text-transform:uppercase}
.table .row .cell{width:14.28%;padding:5px;text-align:center;display:table-cell}

.table .row .cell.disable{color:#ccc}
.table .row .cell span{display:block;width:28px;height:28px;line-height:28px;transition:color,background .4s ease-in-out 0s}
.table .row .cell.active span{color:#fff;background-color:#308ff0}
.months .month[data-active="true"]{-webkit-transform:rotateY(0);transform:rotateY(0)}
.headercalendar [data-action]{color:inherit;position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;z-index:1;opacity:0;transition:all .4s ease-in-out 0s}
.headercalendar [data-action]>i{width:20px;height:20px;display:block;position:absolute;left:50%;top:50%;margin-top:-10px;margin-left:-10px}
.headercalendar [data-action]>i:before,.headercalendar [data-action]>i:after{top:50%;margin-top:-1px;content:'';position:absolute;height:2px;width:20px;border-top:2px solid;border-radius:2px}
.headercalendar [data-action*="prev"]{left:15px}
.headercalendar [data-action*="next"]{right:15px}
.headercalendar [data-action*="prev"]>i:before,.headercalendar [data-action*="prev"]>i:after{left:0}
.headercalendar [data-action*="prev"]>i:before{top:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.headercalendar [data-action*="prev"]>i:after{top:auto;bottom:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.headercalendar [data-action*="next"]>i:before,.headercalendar [data-action*="next"]>i:after{right:0}
.headercalendar [data-action*="next"]>i:before{top:auto;bottom:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.headercalendar [data-action*="next"]>i:after{top:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.headercalendar.active [data-action]{opacity:1}

[data-theme="一月"]{background-color:#90CAF9}
[data-theme="一月"] .row.head{color:#1E88E5}
[data-theme="一月"] .headercalendar .textcalendar,
[data-theme="一月"] .table .row .cell.active span{background-color:#1E88E5}

[data-theme="二月"]{background-color:#81D4FA}
[data-theme="二月"] .row.head{color:#039BE5}
[data-theme="二月"] .headercalendar .textcalendar,
[data-theme="二月"] .table .row .cell.active span{background-color:#039BE5}

[data-theme="三月"]{background-color:#80CBC4}
[data-theme="三月"] .row.head{color:#00897B}
[data-theme="三月"] .headercalendar .textcalendar,
[data-theme="三月"] .table .row .cell.active span{background-color:#00897B}

[data-theme="四月"]{background-color:#C5E1A5}
[data-theme="四月"] .row.head{color:#7CB342}
[data-theme="四月"] .headercalendar .textcalendar,
[data-theme="四月"] .table .row .cell.active span{background-color:#7CB342}

[data-theme="五月"]{background-color:#FFE082}
[data-theme="五月"] .row.head{color:#FFB300}
[data-theme="五月"] .headercalendar .textcalendar,
[data-theme="五月"] .table .row .cell.active span{background-color:#FFB300}

[data-theme="六月"]{background-color:#FFAB91}
[data-theme="六月"] .row.head{color:#F4511E}
[data-theme="六月"] .headercalendar .textcalendar,
[data-theme="六月"] .table .row .cell.active span{background-color:#F4511E}

[data-theme="七月"]{background-color:#CE93D8}
[data-theme="七月"] .row.head{color:#8E24AA}
[data-theme="七月"] .headercalendar .textcalendar,
[data-theme="七月"] .table .row .cell.active span{background-color:#8E24AA}

[data-theme="八月"]{background-color:#B39DDB}
[data-theme="八月"] .row.head{color:#5E35B1}
[data-theme="八月"] .headercalendar .textcalendar,
[data-theme="八月"] .table .row .cell.active span{background-color:#5E35B1}

[data-theme="九月"]{background-color:#EF9A9A}
[data-theme="九月"] .row.head{color:#E53935}
[data-theme="九月"] .headercalendar .textcalendar,
[data-theme="九月"] .table .row .cell.active span{background-color:#E53935}

[data-theme="十月"]{background-color:#CE93D8}
[data-theme="十月"] .row.head{color:#8E24AA}
[data-theme="十月"] .headercalendar .textcalendar,
[data-theme="十月"] .table .row .cell.active span{background-color:#8E24AA}

[data-theme="十一月"]{background-color:#BCAAA4}
[data-theme="十一月"] .row.head{color:#6D4C41}
[data-theme="十一月"] .headercalendar .textcalendar,
[data-theme="十一月"] .table .row .cell.active span{background-color:#6D4C41}

[data-theme="十二月"]{background-color:#B0BEC5}
[data-theme="十二月"] .row.head{color:#546E7A}
[data-theme="十二月"] .headercalendar .textcalendar,
[data-theme="十二月"] .table .row .cell.active span{background-color:#546E7A}